<template>
  <div class='slider'>
    <el-slider v-model="valueMeasured" range carFrameFlag :format-tooltip="formatTooltip" @change="changeRang" :max="max"> </el-slider>
  </div>
</template>

<script>
export default {
  name: 'slider',
  components: {},
  data() {
    return {
      valueMeasured:[0,10]
    }
  },
  props: {
    startTime: {
      type: String,
      default: "",
    },
    max: {
      type: Number,
      default:100,
    },
    endTime: {
      type: String,
      default: "",
    },
  },
  created() {

  },
  mounted() { },
  methods: {
    formatTooltip(time) {
      if(this.startTime){
        // console.log(this.startTime,this.endTime,'传过来的')
        // const data =  this.$dayjs.unix(this.startTime);
        // const times = data.add(1, 'second').format('YYYY-MM-DD HH:mm:ss');
        // console.log(time,'time',data,'data',times,'times',this.startTime)
        let times = this.$dayjs(new Date()).add(1, 'second').format('YYYY-MM-DD HH:mm:ss')
        return times
      }
    },
    changeRang(e){
      console.log(e,'变化的值',this.valueMeasured)
    }
  },
  watch: {
    startTime: {
      handler: function (newVal) {

        this.startTime=newVal
        // let difftime = this.endTime - this.startTime
        var new_date = new Date(); //新建一个日期对象，默认现在的时间
        var old_date = new Date("2023-8-7 16:00:00"); //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期
        // console.log(new_date,old_date,'kaisjdisfj ')
        var difftime = (new_date - old_date) / 1000; //计算时间差,并把毫秒转换成秒

        var days = parseInt(difftime / 86400); // 天  24*60*60*1000
        var hours = parseInt(difftime / 3600) - 24 * days;    // 小时 60*60 总小时数-过去的小时数=现在的小时数
        var minutes = parseInt(difftime % 3600 / 60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
        var seconds = parseInt(difftime % 60);  // 以60秒为一整份 取余 剩下秒数

        // this.max = hours * 60 * 60 + minutes * 60 + seconds
      },
      immediate: true,
      deep: true,
    },
    endTime: {
      handler: function (newVal) {
        this.endTime=newVal
      },
      immediate: true,
      deep: true,
    },
    max: {
      handler: function (newVal) {
        this.max=newVal
      },
      // immediate: true,
      deep: true,
    },
  }
}
</script>
<style lang='less' scoped>
</style>
